﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<header class="header-area inner-page">
    <th:block th:include="commons/front::public-resource">LOGIN</th:block>
    <th:block th:include="commons/front::login-bar">login-bar</th:block>
    <th:block th:include="commons/front::navigation">navigation</th:block>
    <title>创建作品</title>
    <style>
        .widget ul li {
            padding: 0px;
            width: auto;
        }

        .tag-cloud a {
            margin-right: 4.5px;
        }
    </style>
</header>
<header url="/front/index"></header>
<body>

<ol class="breadcrumb">
    <li title="返回上一页"><a href="javascript:history.go(-1);">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a></li>
</ol>

<!-- Blog Post Section -->
<section class="blog-post-section">
    <div class="container fullpage">
        <div class="row" style="width: 100%; height: 520px;">
            <div class="col-sm-8 col-lg-9 col-xs-12">
                <div>
                    <div class="col-sm-2 text-left">
                        <button id="undo" onclick="undo()" title="取消">
                            <img th:src="@{/public/front/images/canvas/undo.png}" style="width: 25px; height: 22px;">
                        </button>

                        <button id="redo" onclick="redo()" disabled title="重做">
                            <img th:src="@{/public/front/images/canvas/redo.png}" style="width: 25px; height: 22px;">
                        </button>
                    </div>

                    <div class="text-right" style="visibility: hidden" id="tools">
                        <a href="#" onclick="bringForward()" title="向上一层" style="border: solid 1px #DDDDDD">
                            <img th:src="@{/public/front/images/canvas/up.png}" style="width: 25px; height: 25px;">
                        </a>
                        <a href="#" onclick="sendBackwards()" title="向下一层" style="border: solid 1px #DDDDDD">
                            <img th:src="@{/public/front/images/canvas/down.png}" style="width: 25px; height: 25px;">
                        </a>
                        <a href="#" onclick="bringToFront()" title="顶层" style="border: solid 1px #DDDDDD">
                            <img th:src="@{/public/front/images/canvas/first.png}" style="width: 25px; height: 25px;">
                        </a>
                        <a href="#" onclick="sendToBack()" title="底层" style="border: solid 1px #DDDDDD">
                            <img th:src="@{/public/front/images/canvas/last.png}" style="width: 25px; height: 25px;">
                        </a>
                        <a href="#" onclick="deleteObject()" title="删除选中" style="border: solid 1px #DDDDDD">
                            <img th:src="@{/public/front/images/canvas/delete.png}" style="width: 25px; height: 25px;">
                        </a>
                    </div>
                </div>

                <div class="blog-post-details table-bordered">
                    <!-- 画板 -->
                    <div class="canvas-container" style="width: 100%; height: 500px;">
                        <canvas id="canvas" style="width: 100%;">

                        </canvas>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-lg-3 col-xs-12">
                <aside class="widget" style="padding-top: 20px;">
                    <h4 class="widget-title">素材库</h4>
                    <ul class="nav nav-pills">
                        <li role="presentation" th:each="c,state:${materialCategories}"
                            onclick="selectMaterialsByCategoryId(this)" th:id="${c.id}">
                            <a href="#" th:text="${c.categoryName}"></a>
                        </li>
                    </ul>

                    <div class="tag-cloud furniture" id="tagCloudContainer">

                    </div>
                </aside>
            </div>
        </div>
        <div class="row" style="margin-top: 100px">
            <div class="comment-section">
                <h3>更多信息</h3>
                <form method="post" class="comment-form" id="suit-form">
                    <input type="text" name="source" id="source" placeholder="创作来源" required>
                    <div style="height: 50px; font-size: 20px">
                        类别 &nbsp;&nbsp;
                        <select name="category" id="category">
                            <option value="1">流行</option>
                            <option value="2">引领</option>
                            <option value="3">时尚</option>
                        </select>
                    </div>
                    <div style="height: 50px; font-size: 20px; margin-bottom: 20px">
                        总价 &nbsp;&nbsp;
                        <input type="text" name="price" style="width: 74.5%;" id="price" placeholder="总价" value="0" readonly>
                    </div>
                    <input type="text" name="facadeLink" style="display: none;" id="facadeLink" placeholder="门面链接">
                    <textarea name="desc" id="desc" placeholder="创意灵感描述" maxlength="200" style="margin-bottom: 0"></textarea>
                    <div class="textareaTip" style="margin-bottom: 40px; margin-top: 5px">您还可以再输入<strong class="textareaCount">200</strong>个字</div>
                    <button type="button" class="primary-btn col-lg-8" id="btn-submit"><span>预览</span></button>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- 预览 -->
<section id="team_section" style="display: none;">
    <div class="container" style="width: 100%;">
        <div class="row col-sm-12" style="margin-left: 5px; ">
            <div class="single-team row" style="padding-top: 30px; padding: 0 1%; position: relative;">
                <h4 style="padding-top: 16px">预览</h4>
                <div id="content_container">
                </div>

                <hr>

                <div style="margin-bottom: 20px; padding-top: 15px; position: absolute; right: 40px;">
                    <button type="button" class="primary-btn" id="publish_btn"><span>发布</span></button>
                </div>
            </div>
        </div>
    </div>
</section>

<template id="content_template">

    <div style="padding-top: 10px">
        <div style="border: solid 2px #ECEEF0; max-height: 350px;">
            <img alt="" src="${statisData.imgUrl}" style="background-size:80% auto; height: 350px; object-fit: cover">
        </div>
        <input type="hidden" id="id" value="${statisData.id}">

        <div class="row" style="margin-top: 5px; padding-left: 15px">
            <div style="font-weight: bolder; font-size: 15px; line-height: 23px;">使用的素材</div>
            {%each(i,m) materialIds %}
            <a href="${m.linkUrl}" target="_blank"
               style="border: solid 2px #ECEEF0;">
                <img src="${m.imgUrl}" style="width: 60px; height: 60px;">
            </a>
            {%/each%}
        </div>

        <div class="row" style="padding-left: 1px; margin-top: 10px">
            <div class="col-sm-12">
                <div style="font-weight: bolder; font-size: 15px; line-height: 23px;">标题</div>
                <div style="display: inline-block;">${statisData.source}</div>
            </div>
        </div>

        <div class="row" style="margin-top: 10px">
            <div class="col-sm-12">
                <div style="font-weight: bolder; font-size: 15px; line-height: 23px;">描述</div>
                <div style="display: none;" id="preview-desc-tmp">${statisData.descrption}</div>
                <pre id="preview-desc" style="background-color: #ffffff; border: none; line-height: 20px; white-space: pre-wrap !important; word-wrap: break-word !important;   width: 100%;"></pre>
            </div>
        </div>
    </div>
</template>

<th:block th:include="commons/front::footer">FOOTER</th:block>

<th:block th:include="commons/front::login">LOGIN</th:block>
<script th:src='@{/public/front/js/canvas/modernizr.min.js}'></script>
<script th:src='@{/public/front/js/canvas/jquery.fullPage.min.js}'></script>
<script th:src='@{/public/front/js/canvas/fabric.min.js}'></script>
<script th:src='@{/public/front/js/canvas.js}'></script>
<template id="image-template">
    {%each(i,m) data %}
    <a>
        <img crossOrigin="anonymous" style="width: 30px; height: 30px; cursor: move"
             price=${m.price}
             src="${m.imgUrl}" id="${m.id}" draggable="true" title="${m.descrption}" index="${$index}">
    </a>
    {%/each%}
</template>
<script>

    var materialIds = [];
    $(function () {
        // 是否商家
        if (isLogin()) {
            $("#facadeLink").css("display", (getUserInfo().type == 2) ? "block": "none");
        }

        // previewSuit(131);

        // 保存
        $("#btn-submit").click(function (e) {

            if (!isLogin()) {
                Alert("您尚未登录");
                return;
            }
            if (!businessStatus()) {
                return false;
            }

            if (c.getObjects().length < 1) {
                Alert("请先组合套装");
                return false;
            }
            // remove fabric borders
            c.deactivateAll().renderAll();

            var actionForm = $("#suit-form");
            if (!actionForm.valid()) {
                return false;
            }
            var canvas = $("#canvas")[0];
            canvas.toBlob(function (blob) {
                var formData = new FormData();
                formData.append('upfile', blob);
                $.ajax({
                    url: ctx + "/upload",
                    type: "post",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (rtn) {
                        if (rtn.url && rtn.url != "") {
                            var storeSessionUser = sessionStorage.getItem("session_user");
                            var customerId;
                            if (storeSessionUser != null) {
                                var sessionUser = $.parseJSON(storeSessionUser);
                                customerId = sessionUser.id;
                            }
                            if (customerId == null || typeof customerId == undefined) {
                                Alert("您尚未登录");
                                return;
                            }
                            actionForm.ajaxSubmit({
                                type: "post",
                                url: ctx + "/front/api/suit/saveSuit",
                                data: {
                                    customerId: customerId,
                                    imgUrl: rtn.url,
                                    materialIds: materialIds.join(","),
                                    IsMerchant: getUserInfo().type == 2 ? 1 : 0,
                                    descrption: $("#desc").val().replace(/"\n"/g, "<br>")
                                },
                                success: function (rtn) {
                                    if (rtn.code != 1) {
                                        Alert(rtn.message);
                                        return;
                                    }
                                    // 跳转预览页
                                    previewSuit(rtn.data);
                                }
                            });
                        }
                    }
                })
            })
        });

        /**
         * 预览
         * @param id 套装ID
         */
        function previewSuit(id) {
            $.get(ctx + "/front/api/suit/previewSuit", {id: id}, function (rtn) {
                $("#content_container").empty();
                $("#content_template").tmpl(rtn.data).appendTo('#content_container');
                $("#preview-desc").append($("#preview-desc-tmp").text());

                layer.open({
                    title: false,
                    type: 1,
                    area: ['40%', '80%'], //宽高
                    shadeClose: true,
                    content: $("#team_section")
                });
            });
        }

        $("#publish_btn").click(function (rtn) {
            var id = $("#id").val();
            $.post(ctx + "/front/api/suit/saveSuit", {id: id, status: 1}, function (rtn) {
                if (rtn.code != 1) {
                    Alert(rtn.message);
                    return;
                }
                Alert("发布成功", function () {
                    var customerId = getUserInfo().id;
                    // 跳转个人中心
                    location.href = ctx + "/front/user_info/"+customerId+"/0";
                });
            });
        });

        selectMaterialsByCategoryId($("ul.nav-pills > li:eq(0)"))
    });

    function selectMaterialsByCategoryId(o) {
        var $this = $(o);
        $this.addClass("active");
        $this.siblings("li").removeClass("active");
        $("#tagCloudContainer").empty();
        $.get(ctx + "/front/selectMaterialsByCategoryId", {categoryId: $this.attr("id")}, function (rtn) {
            if (rtn.code != 1) {
                Alert("获取数据失败");
                return;
            }
            $("#image-template").tmpl(rtn).appendTo('#tagCloudContainer');
            bindImageDrag();
        });
    }
</script>
</body>
</html>